<template>
  <div style="display: flex">
    <div class="my_center">
      <!-- 进度池 percentPondConfig-->
      <dv-percent-pond :config="percentPondConfig1" class="my_pond" />
      <div>送达率</div>
    </div>
    <div class="my_center">
      <!-- 进度池 percentPondConfig-->
      <dv-percent-pond :config="percentPondConfig2" class="my_pond" />
      <div>退货订单</div>
    </div>

    <div class="my_center">
      <!-- 进度池 percentPondConfig-->
      <dv-percent-pond :config="percentPondConfig3" class="my_pond" />
      <div>异常订单</div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useBusinessStore } from "/@/store/index.ts";
const businessStore = useBusinessStore();

let abnormalInfo:any = ref({
  delivery: 0,
  return: 0,
  abnormal: 0
});
watch(() => businessStore.abnormal_data, (newVal, oldVal) => {
  abnormalInfo.value = newVal;
  init();
}, {
  deep: true // 如果需要深度监听对象内部属性的变化
})
onMounted(() => {
  // init();
})

const percentPondConfig1 = ref();
const percentPondConfig2 = ref();
const percentPondConfig3 = ref();

const init = () => {
  percentPondConfig1.value = {
    // 进度值，范围在 0 到 100 之间
    value: abnormalInfo.value.delivery,
    // 线条间隙，数组中的两个数字分别表示实线长度和间隙长度
    lineDash: [6, 2],
    // 进度池配色，数组中的两个颜色分别表示起始颜色和结束颜色
    colors: ["#01c4f9", "#c135ff"],
    // 边框宽度
    borderWidth: 3,
    // 边框间隙
    borderGap: 3,
    // 文字颜色
    textColor: "#fff",
    // 字体大小
    fontSize: "1px", // 或者 '1em', '2rem' 等 CSS 单位
    // 边框半径
    borderRadius: 5,
    // 是否使用局部渐变
    localGradient: false,
    // 信息格式化字符串，{value} 将会被替换为实际的进度值
    formatter: "{value}%",
  };
  percentPondConfig2.value = {
    // 进度值，范围在 0 到 100 之间
    value: abnormalInfo.value.return,
    // 线条间隙，数组中的两个数字分别表示实线长度和间隙长度
    lineDash: [6, 2],
    // 进度池配色，数组中的两个颜色分别表示起始颜色和结束颜色
    colors: ["#01c4f9", "#c135ff"],
    // 边框宽度
    borderWidth: 3,
    // 边框间隙
    borderGap: 3,
    // 文字颜色
    textColor: "#fff",
    // 字体大小
    fontSize: "1px", // 或者 '1em', '2rem' 等 CSS 单位
    // 边框半径
    borderRadius: 5,
    // 是否使用局部渐变
    localGradient: false,
    // 信息格式化字符串，{value} 将会被替换为实际的进度值
    formatter: "{value}%",
  };
  percentPondConfig3.value = {
    // 进度值，范围在 0 到 100 之间
    value: abnormalInfo.value.abnormal,
    // 线条间隙，数组中的两个数字分别表示实线长度和间隙长度
    lineDash: [6, 2],
    // 进度池配色，数组中的两个颜色分别表示起始颜色和结束颜色
    colors: ["#01c4f9", "#c135ff"],
    // 边框宽度
    borderWidth: 3,
    // 边框间隙
    borderGap: 3,
    // 文字颜色
    textColor: "#fff",
    // 字体大小
    fontSize: "1px", // 或者 '1em', '2rem' 等 CSS 单位
    // 边框半径
    borderRadius: 5,
    // 是否使用局部渐变
    localGradient: false,
    // 信息格式化字符串，{value} 将会被替换为实际的进度值
    formatter: "{value}%",
  };
};
</script>

<style>
.my_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  font-size: 18px;
  color: #ffffffce;
}
.my_pond {
  width: 95px;
  height: 50px;
  margin-bottom: 8px;
}

/* 强制修改字体大小 */
.dv-percent-pond text {
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 24px !important; /* 设置字体大小为 16 像素 */
}
</style>